<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>发放机社区掉袋积分设置</h2>
        </div>
      </div>
<!-- 			<areaLinkage> </areaLinkage> -->
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
			<Card  style="margin-bottom: 10px;">
				<div class="normal-list-page-hd clearfix">
					<Input placeholder="社区名称" class="mr-10" v-model="queryData.name"style="width: 150px"/>
					<Input placeholder="社区ID" class="mr-10" v-model="queryData.commid" type="number" style="width: 150px"/>
					<Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click='inQuire'>查询</Button>
				</div>
			</Card>
			<div class="normal-list-page-hd clearfix">
				<Button type="primary" custom-icon="iconfont icon-fangkuai2" size="small" @click="showCreateModal" class="fr">新建</Button>
			</div>
            <div class="normal-list-page-bd">
                <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
            </div>
            <div>
                <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total show-elevator @on-change="changePage"></Page>
            </div>
        </div>
		<Modal v-model="modal.lntegralSet.thatShow" :loading="modal.lntegralSet.loading" :mask-closable="false" :title="modal.lntegralSet.title" @on-ok="getData" width='750'>
		  <Form ref="lntegralSetFrom" :model="modal.lntegralSet.formData" :rules="modal.lntegralSet.rules" :label-width="120" >
				<Row type="flex" justify="start" class="code-row-bg">
					<Col span="8">
						<FormItem label="设备所在区域" v-model="modal.lntegralSet.formData.provid" prop="provid">
							<queryData @ProvinceData="formdataValue" style="width: 535px"></queryData>
						</FormItem>
					</Col>
				</Row>
		  </Form>
		</Modal>
      </div>
    </div>
  </div>
</template>
<script>
import gcDispenserApi from "@/api/base_sys/gcDispenser.js";
import moment from "moment";
import { Message } from "iview";
import queryData from "@/view/test/cityTestZj.vue"

export default {
	    components: {
	    queryData
	},
  name: "lntegralSet",
  data() {
    return {
			newSbType:{
				cityCascade:{
					data:[{
						id:'',
						name:'请选择'
					}],
					please:'',
					provid:[],
					cityid:[],
					distid:[],
					strt:[],
					commid:[],
					comminid:[],
					}
				},
      // 弹出层数据
      modal: {
        lntegralSet: {
          isShow: false,
		  thatShow: false,
          loading: true,
		flog:false,
          type: "create", // create 新建，update 修改
          title: "新建",
          rules: {
			// provid:[
			// 		{
			// 			required:true,
			// 			message:"请选择地区",
			// 			trigger:"blur",
			// 			type:'number'
			// 		}
			// 	],
			// cityid:[
			// 		{
			// 			required:true,
			// 			message:"请选择地区",
			// 			trigger:"blur",
			// 			type:'number'
			// 		}
			// 	],
			// distid:[
			// 		{
			// 			required:true,
			// 			message:"请选择地区",
			// 			trigger:"blur",
			// 			type:'number'
			// 		}
			// 	],
			// 	strtid:[
			// 			{
			// 				required:true,
			// 				message:"请选择地区",
			// 				trigger:"blur",
			// 				type:'number'
			// 			}
			// 		],
          },
          formData: {
						commid:''
            // id: undefined,
            // name: "",
            // url: "",
            // state: ""
          }
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // 开始自动生成
					{
            title: "编号",
            key: "id",
			 align: "center",
       minWidth:100
          },
          {
            title: "社区ID",
            key: "commid",
			 align: "center",
       minWidth:100
          },
          {
            title: "社区名称",
            key: "name",
			 align: "center",
       minWidth:100
          },

          {
            title: "操作",
            align: "center",
            minWidth:130,
            render: (h, params) => {
              return h("div", { class: "action-group" }, [
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delData(params.row)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ]);
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: "",
		    commid:""
      }
    };
  },
  created() {
    // console.log(123);
    this.getTableData();
  },
  methods: {

    // 获取列表
    getTableData() {
      const that = this;
      that.queryData.totalRecord = undefined;
      gcDispenserApi.getData('/api/gcDispenserSetcommid',that.queryData)
        .then(res => {
          that.list.tableData = res.data.list;
          that.queryData.totalRecord = res.data.totalRecord;
          that.queryData.limit = res.data.pageSize;
        })
        .catch(error => {
          Message.error(error);
        });
    },
	//表单城市级联
	// formdataValue(formdata){
	// 	this.modal.lntegralSet.formData.provid = formdata.provid;
	// 	this.modal.lntegralSet.formData.commid = formdata.commid;
	// 	this.modal.lntegralSet.formData.cityid = formdata.cityid;
	// 	this.modal.lntegralSet.formData.comminid = formdata.comminid;
	// 	this.modal.lntegralSet.formData.distid = formdata.distid;
	// 	this.modal.lntegralSet.formData.strt = formdata.strt;
	// },
	formdataValue(formdata){
			if(formdata.comminid ==''){
				if(formdata.commid ==''){
					if(formdata.strt ==''){
						this.modal.lntegralSet.flog = false;
					}else{
						this.modal.lntegralSet.formData.commid = formdata.strt;
						this.modal.lntegralSet.flog = true;
					}
				}else{
					this.modal.lntegralSet.formData.commid = formdata.commid
				}
			}else{
				this.modal.lntegralSet.formData.commid = formdata.comminid
			}
		},
    // 删除
    delData(data) {
      this.$Modal.confirm({
        title: "确认删除",
        content:
          "<p>您确认删除 <strong>" +
          data.name.toString() +
          "</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>",
        loading: true,
        onOk: () => {
          gcDispenserApi.del('/api/gcDispenserSetcommid/'+data.commid).then(res => {
            this.$Modal.remove();
            if (!res.code) {
              this.$Notice.success({
                title: "删除成功"
              });
              this.queryData.page = 1;
              this.getTableData();
            } else {
              this.$Notice.error({
                title: res.message
              });
            }
          });
        }
      });
    },
	getData() {
		if(this.modal.lntegralSet.flog==true){
				console.log(this.modal.lntegralSet.flog)
				 const that = this;
					that.$refs["lntegralSetFrom"].validate(valid => {
						if (valid) {
                gcDispenserApi.add('/api/gcDispenserSetcommid',that.modal.lntegralSet.formData)
                .then(res =>{
								that.modal.lntegralSet.thatShow = false;
								that.modal.lntegralSet.loading = false;
													if (!res.code) {
														that.getTableData();
														that.$Notice.success({
															title: "保存成功!"
														});
													} else {
														that.$Notice.error({
															title: res.message
														});
													}
							})
					} else {
					that.modal.lntegralSet.loading = false;
					that.$nextTick(() => {
						that.modal.lntegralSet.loading = true;
					});
				}
			});
		}else{
			const that = this;
			that.modal.lntegralSet.loading = false;
			that.$nextTick(() => {
				that.modal.lntegralSet.loading = true;
			});
			this.$Message.warning('地址至少要选择到街道才能提交');

		}

	},
   //     getData() {
   //       const that = this;
   // 	that.$refs["lntegralSetFrom"].validate(valid => {
   // 		if (valid) {
			// 	if(that.modal.lntegralSet.formData.comminid == ""){
			// 		if(that.modal.lntegralSet.formData.commid== ""){
			// 							let data =that.modal.lntegralSet.formData.strtid;
			// 							that.modal.lntegralSet.formData.commid = data
			// 							gcDispenserApi.add('/api/gcDispenserSetnum',that.modal.lntegralSet.formData).then(res =>{
			// 												that.modal.lntegralSet.thatShow = false;
			// 												that.modal.lntegralSet.loading = false;
			// 																	if (!res.code) {
			// 																		that.getTableData();
			// 																		that.$Notice.success({
			// 																			title: "保存成功!"
			// 																		});
			// 																	} else {
			// 																		that.$Notice.error({
			// 																			title: res.message
			// 																		});
			// 																	}
			// 											})
			// 		}else{
			// 			let data = that.modal.lntegralSet.formData.commid;
			// 			that.modal.lntegralSet.formData.commid = data;
			// 			gcDispenserApi.add('/api/gcDispenserSetnum',that.modal.lntegralSet.formData).then(res =>{
			// 												that.modal.lntegralSet.thatShow = false;
			// 												that.modal.lntegralSet.loading = false;
			// 																	if (!res.code) {
			// 																		that.getTableData();
			// 																		that.$Notice.success({
			// 																			title: "保存成功!"
			// 																		});
			// 																	} else {
			// 																		that.$Notice.error({
			// 																			title: res.message
			// 																		});
			// 																	}
			// 											})
			// 		}
			// 	}else{
			// 		let data = that.modal.lntegralSet.formData.comminid;
			// 		that.modal.lntegralSet.formData.commid = data;
			// 	gcDispenserApi.add('/api/gcDispenserSetnum',that.modal.lntegralSet.formData).then(res =>{
			// 										that.modal.lntegralSet.thatShow = false;
			// 										that.modal.lntegralSet.loading = false;
			// 															if (!res.code) {
			// 																that.getTableData();
			// 																that.$Notice.success({
			// 																	title: "保存成功!"
			// 																});
			// 															} else {
			// 																that.$Notice.error({
			// 																	title: res.message
			// 																});
			// 															}
			// 									})
			// 	}

   // 									        } else {
   // 									    that.modal.lntegralSet.loading = false;
   // 									    that.$nextTick(() => {
   // 									      that.modal.lntegralSet.loading = true;
   // 									    });
   // 									  }
   // 									});

   // },
    // 查询
    inQuire() {
			this.queryData.page=1;
		 this.getTableData();
    },

    // 全选，不全选a
    // selectionChange(args) {
    //   this.list.selections = args;
    // },

    //每页显示记录数变更
    onPageSizeChange(pageSize) {
      this.queryData.limit = pageSize;
      this.getTableData();
    },

    // 换页
    changePage(page) {
      this.queryData.page = page;
      this.getTableData();
    },

    // 显示新建弹窗
    showCreateModal() {

      this.modal.lntegralSet.type = "create";
      this.modal.lntegralSet.title = "新建";
      this.modal.lntegralSet.formData = {};

      this.modal.lntegralSet.thatShow = true;
	 //  console.log('111111')
	 //  // Document.getElementsByClassName("ivu-cascader-rel").onmouseover()
	 //  Document.getElementsByClassName("ivu-icon ivu-icon-ios-close ivu-cascader-arrow").click()
	 //  // var x=document.getElementsByClassName("ivu-icon ivu-icon-arrow-down-b ivu-cascader-arrow").innerHTML()
		// this.modal.lntegralSet.formData.provid = '';
		// this.modal.lntegralSet.formData.commid ='';
		// this.modal.lntegralSet.formData.cityid ='';
		// this.modal.lntegralSet.formData.comminid = '';
		// this.modal.lntegralSet.formData.distid ='';
		// this.modal.lntegralSet.formData.strt = '';

    },

    // 显示修改弹窗
    // showUpdateModal(id) {
    //   this.modal.lntegralSet.type = "update";
    //   this.modal.lntegralSet.title = "修改";
    //   const that = this;
    //   gcDispenserApi.getDetail('/api/gcDispenserSetcommid',id)
    //   .then(res => {
    //       that.modal.lntegralSet.formData = res.data;
    //       that.modal.lntegralSet.isShow = true;
    //     })
    //     .catch(error => {
    //       Message.error(error);
    //     });
    //
    // },

  },


  
};
</script>
